<template>
	<el-dropdown trigger="click" @command="handleSetSize">
		<div>
			<svg-icon class-name="size-icon" icon-class="size" />
		</div>
		<el-dropdown-menu slot="dropdown">
			<el-dropdown-item
				v-for="item of sizeOptions"
				:key="item.value"
				:disabled="size === item.value"
				:command="item.value"
			>
				{{ item.label }}
			</el-dropdown-item>
		</el-dropdown-menu>
	</el-dropdown>
</template>

<script>
	export default {
		data() {
			return {
				sizeOptions: [
					{ label: 'Default', value: 'default' },
					{ label: 'Medium', value: 'medium' },
					{ label: 'Small', value: 'small' },
					{ label: 'Mini', value: 'mini' }
				]
			};
		},
		computed: {
			size() {
				return this.$store.getters.size;
			}
		},
		methods: {
			handleSetSize(size) {
				this.$ELEMENT.size = size;
				this.$store.dispatch('app/setSize', size);
				this.refreshView();
				this.$message({
					message: 'Switch Size Success',
					type: 'success'
				});
			},
			refreshView() {
				// In order to make the cached page re-rendered
				this.$store.dispatch('views/delAllCachedViews', this.$route);

				const { fullPath } = this.$route;

				this.$nextTick(() => {
					this.$router.replace({
						path: '/redirect' + fullPath
					});
				});
			}
		}
	};
</script>
